<template>
    <div>
        {{ info }}
        <h1>房型添加</h1>
        <table class="table table-bordered">
            <tbody>
                <tr>
                    <td align="right">房型名称</td>
                    <td><input type="text" v-model="info.HouseTypeName"></td>
                </tr>

                <tr>
                    <td align="right">房型图片</td>
                    <td><input type="file" @change="imgs">
                    <img :src="info.Pic" width="100" height="100" v-if="info.Pic!=''">
                </td>
                </tr>

                <tr>
                    <td align="right">面积</td>
                    <td><input type="text" v-model="info.Area"></td>
                </tr>

                 <tr>
                    <td align="right">是否有窗</td>
                    <td><input type="radio" name="datas" v-model="info.IsWin" :value="true">有
                        <input type="radio" name="datas" v-model="info.IsWin" :value="false">无
                    </td>
                </tr>
                <tr>
                    <td align="right">最多入住人数</td>
                    <td>
                        <input type="text" v-model="info.PepleCount">
                    </td>
                </tr>
                 <tr>
                    <td align="right">房型价格</td>
                    <td>
                        <input type="text" v-model="info.Price">
                    </td>
                </tr>
                <tr>
                    <td align="right">房型状态</td>
                    <td><input type="radio" name="dats" v-model="info.State" :value="1">上架
                        <input type="radio" name="dats" v-model="info.State" :value="2">下架
                    </td>
                </tr>
                 <tr>
                    <td align="right">门店外键</td>
                    <td>
                        <select v-model="info.ShopId">
                            <option value="">请选择</option>
                            <option :value="itme.Id" v-for="itme in lisr.list":key="itme.Id"> {{ itme.ShopName }}</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td align="right"></td>
                    <td><input type='button' value="添加" class="btn btn-primary" @click="ok"></td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script setup lang="ts">
import {ref,reactive,onMounted} from 'vue'
import axios from 'axios';
import { useRouter } from 'vue-router';
const rouder=useRouter();

let info:any=reactive({
  HouseTypeName: '',
  Pic: '',
  Area: '',
  IsWin: '',
  PepleCount: '',
  Price:'',
  State: '',
  ShopId: '',
})
let info1:any=reactive({
    pageIndex:1,
    pagesize:100,
    names:'',
    addres:''
})

let lisr:any=reactive({
    a:[],

})


const imgs=(e:any)=>{
let obj=e.target.files[0];
let f =new FormData();
f.append('file',obj);
axios({
    url:'/api/Shop/Img',
    method:'post',
    data:f
})
.then((res)=>{
    console.log(res);
    info.Pic=res.data
    
})
.catch((err)=>{
    console.log(err);
    
})
}


onMounted(()=>{
    getlist();
})
const getlist=()=>{
    axios({
        url:'/api/Shop/GetShow',
        method:'get',
        params:info1
    })
    .then((res)=>{
        console.log(res);
        Object.assign(lisr,res.data)
    })
    .catch((err)=>{
        console.log(err);
        
    })

}



const ok=()=>{
    axios({
        url:'/api/Houser/Add',
        method:'post',
        data:info
    })
    .then((res)=>{
        console.log(res);
        if(res.data==-1)
    {
        alert('门店名称重复');
        return;
    }
    if(res.data>0)
    {
        alert('添加成功');
        rouder.push("/showhouser")
        
        return;
    }
    else
    {
        alert('添加失败');
        return;
    }
    })
    .catch((err)=>{
        console.log(err);
        
    })
}
</script>

<style scoped>

</style>